<template>
    <div class="page">
      <div>
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
          <el-form-item label="名称">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="formLabelAlign.describe"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <el-input v-model="formLabelAlign.img"></el-input>
          </el-form-item>
        </el-form>

        <div>
          <el-upload
            class="upload-demo"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>

        <div>
          <el-button type="primary" @click="makesure">确认修改</el-button>
          <el-button type="primary" @click="cancelupdata">取消修改</el-button>

        </div>
      </div>
    </div>
</template>

<script>
import remote from '@/utils/http'

  export default {
  name: 'Updata',
  data () {
    return {
      labelPosition: 'left',
      formLabelAlign: {
        name: '',
        img: '',
        describe: ''
      },
      fileList: []
    }
  },
  created () {},
  methods: {
    makesure () {
      console.log('确认修改')
    },
    cancelupdata () {
      console.log('取消修该')
    }
  }
}
</script>

<style scoped>
  .page{
    font-size: 40px;
    font-weight: bold;
    padding: 50px 50px;
  }
</style>
